import React, { useState, useEffect } from 'react';
import {
    Platform,
    StyleSheet, Text,
    View
} from 'react-native';
import {useCalculate} from "../../hooks/useCalculate";

export default function CalculateItem(props) {

    const { calculatesMaxTime } = useCalculate();
    let selectLevelIndex = props?.selectLevelIndex || 1;
    let containView = null;

    let selectIndex =  props?.selectIndex || 1;

    const containItem = (data, isChildren, index) => {

        let usedTimePer = parseFloat(String(((data.usedTime || 0) / calculatesMaxTime).toFixed(2) * 100));
        if (usedTimePer < 0.5 && data.usedTime != 0) {
            usedTimePer = 0.5;
        }
        let usedPlanPer = parseFloat(String(((data.planTime || 0) / calculatesMaxTime).toFixed(2) * 100));
        if (usedPlanPer < 0.5 && data.planTime != 0) {
            usedPlanPer = 0.5;
        }

        return (
            <View key={'containItem_' + index} style={[styles.itemView,{backgroundColor: isChildren?'rgba(244, 244, 244, 1)':'#fff',marginHorizontal:isChildren?0:16}]}>
                <View style={styles.leftItemView}>
                    <Text style={styles.leftItemTitle}>{data?.name}<Text style={styles.leftItemStatus}>  {data.archive?'已归档':''}</Text></Text>
                    <Text style={styles.leftItemDesc}>{ ((data.planTime||0)-(data.usedTime||0)) >= 0 ? '剩余' : '超出' }：{selectIndex == 2 ?(Math.abs((data.planTime||0)-(data.usedTime||0)).toFixed(1)) : (Math.abs((data.planTimeHour||0)-(data.usedTimeHour||0)).toFixed(1))}h</Text>
                </View>
                <View style={[styles.midItemView,{backgroundColor: isChildren?'#fff':'rgba(244, 244, 244, 1)'}]}></View>
                <View style={styles.rightItemView}>
                    <View style={styles.progressView}>
                        <View style={[styles.progress,{width: `${usedPlanPer}%`,backgroundColor: 'rgba(229, 229, 234, 1)'}]}></View>
                        <Text style={styles.progressText}>{selectIndex == 2 ? (data?.planTime||0) : (data?.planTimeHour||0)}h</Text>
                    </View>
                    <View style={styles.progressBottomView}>
                        <View style={[styles.progress,{width: `${usedTimePer}%`,backgroundColor: (data?.usedTime||0)>(data?.planTime||0)?'rgba(48, 118, 217, 1)':'rgba(48, 118, 217, 1)'}]}></View>
                        <Text style={styles.progressText}>{selectIndex == 2 ? (data?.usedTime||0) : (data?.usedTimeHour||0)}h</Text>
                    </View>
                </View>
            </View>
        )
    }

    if (selectLevelIndex == 1) {
        containView = containItem(props, false, '');
    } else {
        containView = <View style={styles.itemChildrenView}>
                <Text style={styles.leftItemChildrenTitle}>{props?.name}</Text>
            {
                props?.children?.map((item,index)=>{
                    return containItem(item,true,index);
                })
            }
        </View>
    }

    return containView;
}

const styles = StyleSheet.create({
    itemView: {
        backgroundColor: '#fff',
        marginBottom: 16,
        borderRadius: 16,
        alignItems: 'center',
        flexDirection: 'row',
        marginHorizontal: 16,
    },
    itemChildrenView: {
        backgroundColor: '#fff',
        marginBottom: 16,
        borderRadius: 16,
        padding: 16,
        marginHorizontal: 16,
    },
    leftItemView: {
        width: '40%',
        padding: 16,
    },
    midItemView: {
        width: 2,
        backgroundColor: 'rgba(244, 244, 244, 1)',
        height: '100%',
    },
    rightItemView: {
        width: '59%',
        // padding: 16,
        paddingHorizontal:16,
        overflow:'hidden',
        // paddingVertical:14,
    },
    leftItemTitle: {
        color: 'rgba(44, 44, 46, 1)',
        fontSize: 14,
        fontWeight: 'bold',
    },
    leftItemChildrenTitle: {
        color: 'rgba(44, 44, 46, 1)',
        fontSize: 14,
        fontWeight: 'bold',
        marginBottom: 8
    },
    leftItemStatus: {
        color: 'rgba(142, 142, 147, 1)',
        fontSize: 10,
    },
    leftItemDesc: {
        color: 'rgba(142, 142, 147, 1)',
        fontSize: 12,
        marginTop: 5,
    },
    progressView: {
        flexDirection: 'row',
        alignItems: 'center',
        marginRight:16,
        maxWidth: '75%',
    },
    progressBottomView: {
        flexDirection: 'row',
        alignItems: 'center',
        marginRight:16,
        marginTop: 8,
        maxWidth: '75%',
    },
    progress: {
        height: 4,
        borderRadius: 2,
    },
    progressText: {
        color: 'rgba(72, 72, 74, 1)',
        fontSize: 14,
        marginLeft: 8,
    }
});
